<template>
  <div class="users">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input
          placeholder="请输入搜索关键字"
          v-model="query"
          clearable
          @keyup.enter.native="searchEnterFun"
        >
        </el-input>
        <span class="el-icon-search" @click="searchUsers"></span>
        <el-button type="primary" @click="openDialog('create')"
          >添加用户</el-button
        >
      </div>
      <!-- Table -->
      <div class="list-card-item">
        <el-table
          :data="userList"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          > >
          <el-table-column label="排序" width="50" type="index">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="120">
          </el-table-column>
          <el-table-column width="120" prop="mobile" label="手机号">
          </el-table-column>
          <el-table-column prop="role_name" label="角色" width="120">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="180">
            <template v-slot="{ row: { create_time } }">
              <span>
                {{ create_time | dateFormat }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="mg_state" label="状态" width="100">
            <template v-slot="scope">
              <!-- {{ scope.row }} -->
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="userStateChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <div>
                <el-button
                  @click="clickUserBtn(row, 'edit')"
                  type="primary"
                  icon="el-icon-edit"
                  >编辑</el-button
                >
                <el-button
                  @click="clickUserBtn(row, 'del')"
                  type="danger"
                  icon="el-icon-delete"
                  >删除</el-button
                >
                <el-button
                  @click="clickUserBtn(row, 'allot')"
                  type="warning"
                  icon="el-icon-s-tools"
                  >分配角色</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <Pagination
        v-if="total > 0"
        :total="total"
        :page.sync="pagenum"
        :limit.sync="pagesize"
        @pagination="getUserList"
      ></Pagination>
    </el-card>
    <!-- Dialog 对话框 -->
    <Dialog
      :dialogFormVisible="dialogFormVisible"
      :title="title"
      :form="form"
      @closeDialog="closeDialog"
      :type="type"
      @getUserList="getUserList"
    >
      <template v-slot="scope" v-if="type === 'allot'">
        <div class="slot-warp">
          <div class="tem-dia-item">
            当前用户:
            {{ scope.form.username }}
          </div>
          <div class="tem-dia-item">
            当前角色:
            {{ scope.form.role_name }}
          </div>
          <el-form-item
            :label="scope.title"
            :label-width="scope.formLabelWidth"
          >
            <el-select v-model="scope.form.roleId" placeholder="请选择">
              <el-option
                v-for="item in scope.roles"
                :key="item.id"
                :value="item.id"
                :label="item.roleName"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Dialog from './components/Dialog'
import { getUser, updateUserState, deleteUser } from '@/api/user'
export default {
  name: 'Users',
  components: { Pagination, Dialog },
  data() {
    return {
      userList: [], // 用户列表
      pagenum: 1, // 页码
      pagesize: 20, // 每页显示的条数
      total: 0, // 数据条数
      query: '', // 搜索框当前的内容
      copy: '', // 上一次搜索框内容
      dialogFormVisible: false, // Dialog
      title: '操作用户', // Dialog
      form: {
        username: '', // 用户名称
        password: '', // 密码
        email: '', // 邮箱
        mobile: '', // 手机号
        roleId: '' // 权限ID
      }, // Dialog
      type: '' // Dialog 类型
    }
  },
  watch: {
    query: function(newVal) {
      if (newVal === '') {
        this.searchUsers()
      }
    }
  },
  methods: {
    closeDialog() {
      const form = {
        username: '', // 用户名称
        password: '', // 密码
        email: '', // 邮箱
        mobile: '', // 手机号
        roleId: '' // 权限ID
      }
      this.form = form
      this.dialogFormVisible = false
    },
    openDialog(type = '') {
      if (type === 'create') {
        this.type = 'create'
        this.title = '添加用户'
      }
      this.dialogFormVisible = true
    },
    searchUsers() {
      this.pagenum = 1
      this.userList = []
      this.total = 0
      this.getUserList()
    },
    searchEnterFun(e) {
      if (e.key === 'Enter' && e.keyCode === 13 && this.query) {
        this.searchUsers()
      }
    },
    async userStateChange(user) {
      updateUserState({
        uId: user.id,
        type: user.mg_state
      })
        .then(() => {})
        .catch(() => {
          this.getUserList()
        })
    },
    clickUserBtn(row, type) {
      if (type === 'del') {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(res => {
            const { id } = row
            deleteUser(id).then(() => {
              this.getUserList()
            })
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      } else {
        if (type === 'edit') {
          this.type = 'edit'
          this.title = '编辑用户'
        } else {
          this.type = 'allot'
          this.title = '分配角色'
        }
        this.form = row
        this.dialogFormVisible = true
      }
    },
    async getUserList() {
      const { pagesize, query, copy } = this
      if (query !== copy) {
        this.pagenum = 1
      }
      try {
        const { data: res } = await getUser({
          pagenum: this.pagenum,
          pagesize,
          query
        })
        const { total, users } = res
        this.total = total
        this.userList = users
        this.copy = query
      } catch (error) {
        console.log(error)
      }
    }
  },
  created() {
    this.getUserList()
  }
}
</script>
<style lang="scss" scoped>
.users {
  .box-card {
    .clearfix {
      display: flex;
      align-items: center;
      .el-input {
        width: 200px;
      }
      .el-icon-search {
        width: 60px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        border-left: 0;
        border-radius: 0 5px 5px 0;
        background: #eee;
        margin-right: 30px;
      }
    }
    .list-card-item {
      width: 100%;
    }
  }
  .slot-warp {
    padding: 0 30px;
    .tem-dia-item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      flex-wrap: 500;
      &:last-child {
        margin-bottom: 20px;
      }
    }
    .el-form-item__label {
      font-size: 18px;
    }
  }
}
</style>
